<template>
  <a-layout>
    <drawer v-if="isMobile" :openDrawer="collapsed" @change="onDrawerChange">
      <sider-menu :theme="theme" :menuData="fullMenu" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect" v-show="this.$route.path !== '/home'"/>
    </drawer>
    <sider-menu :theme="theme" v-else-if="layout === 'side'" :menuData="menuData" :collapsed="collapsed" :collapsible="true" v-show="this.$route.path !== '/home'"/>
    <drawer :open-drawer="settingBar" placement="right">
      <setting />
    </drawer>
    <a-layout :style="{ paddingLeft: paddingLeft }">
      <global-header :menuData="menuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
      <a-layout-content :style="{minHeight: minHeight, margin: '80px 14px 0'}" :class="fixHeader ? 'fixed-header-content' : null">
        <tags-view />
        <slot></slot>
      </a-layout-content>
      <a-layout-footer style="padding: .29rem 0" class="copyright">
        <global-footer :copyright="copyright"/>
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script>
import GlobalHeader from './GlobalHeader'
import GlobalFooter from './GlobalFooter'
import Drawer from '~/tool/Drawer'
import SiderMenu from '~/menu/SiderMenu'
import Setting from '~/setting/Setting'
import { mapState, mapMutations } from 'vuex'
import { triggerWindowResizeEvent } from 'utils/common'
// import constRouter from '@/router/constRouter'
import tagsView from './tagsView'

const minHeight = window.innerHeight - 64 - 24 - 103

export default {
  name: 'GlobalLayout',
  components: {Setting, SiderMenu, Drawer, GlobalFooter, GlobalHeader, tagsView},
  data () {
    return {
      minHeight: minHeight + 'px',
      collapsed: false
    }
  },
  computed: {
    paddingLeft () {
      return this.fixSiderbar && this.layout === 'side' && !this.isMobile && this.$route.path !== '/home' ? `${this.sidebarOpened ? 256 : 80}px` : '0'
    },
    ...mapState({
      sidebarOpened: state => state.setting.sidebar.opened,
      isMobile: state => state.setting.isMobile,
      theme: state => state.setting.theme,
      layout: state => state.setting.layout,
      copyright: state => state.setting.copyright,
      fixSiderbar: state => state.setting.fixSiderbar,
      fixHeader: state => state.setting.fixHeader,
      settingBar: state => state.setting.settingBar.opened,
      menuData: state => state.setting.menuData,
      mapData: state => state.setting.menuData,
      fullMenu: state => state.setting.fullMenu
    })
  },
  created () {
    if (this.isMobile) {
      this.collapsed = true
    }
  },
  methods: {
    ...mapMutations({
      setSidebar: 'setting/setSidebar'
    }),
    toggleCollapse () {
      this.collapsed = !this.collapsed
      this.setSidebar(!this.collapsed)
      triggerWindowResizeEvent()
    },
    onDrawerChange (show) {
      this.collapsed = show
    },
    onMenuSelect () {
      this.toggleCollapse()
    }
  },
  beforeCreate () {
    // const mapData = {}
    // constRouter.map((menu) => {
    //   mapData[menu.id] = menu.children
    // })
    // let virtual = this.$db.get('virtual')
    // console.log(constRouter,111111111)
    console.log(this.$router.options.routes)
    this.$store.dispatch('setting/setMenu', { menuData: this.$router.options.routes, fullMenu: this.$router.options.routes })

    // console.log(this.menuData)
    // console.log(constRouter)
    // setTimeout(() => {
    //   console.log(this.menuData)
    // }, 2000)
    // this.$store.dispatch('setting/setData', { mapData })
  }
}
</script>

<style lang="less">

.page-transition-enter {
  opacity: 0;
}

.page-transition-leave-active {
  opacity: 0;
}

.page-transition-enter .page-transition-container,
.page-transition-leave-active .page-transition-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
</style>
